<template>
  <el-dialog title="Insert Fictitious Comment" :before-close="onCancel">
    <el-form
      label-width="auto"
      ref="commentFormCpt"
      :model="commentForm"
      :rules="commentFormRules"
      :disabled="isSubmitting"
    >
      <el-form-item label="Product" prop="product_id">
        <el-select v-model="commentForm.product_id" style="width: 100%">
          <el-option
            v-for="item in productList"
            :key="item.id"
            :value="item.id"
            :label="item.store_name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="User Name" prop="nickname">
        <el-input v-model="commentForm.nickname"></el-input>
      </el-form-item>
      <el-form-item label="Avatar" prop="avatar">
        <ImageManager v-model="commentForm.avatar" />
      </el-form-item>
      <el-form-item label="Product Score">
        <el-rate allow-half v-model="commentForm.product_score"></el-rate>
      </el-form-item>
      <el-form-item label="Service Score">
        <el-rate allow-half v-model="commentForm.service_score"></el-rate>
      </el-form-item>
      <el-form-item label="Comment" prop="comment">
        <el-input type="textarea" v-model="commentForm.comment"></el-input>
      </el-form-item>
      <el-form-item label="Images">
        <ImageManager v-model="commentForm.pics" :max="10" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="onCancel">Cancel</el-button>
      <el-button type="primary" @click="onSubmit" :loading="isSubmitting">Submit</el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import ImageManager from '@/components/image-manager/index.vue'
import { ref } from 'vue'
import { submitComment } from '@/api/product'

import {
  productListParams,
  handleGetProductList,
  productList,
} from '@/pages/product/list/index'

const commentForm = ref({
  product_id: '',
  image: {
    image: '',
    product_id: '',
  },
  nickname: '',
  avatar: '',
  pics: [],
  product_score: 5,
  service_score: 5,
  add_time: '',
  comment: '',
})

const commentFormRules = ref({
  product_id: [
    { required: true, message: 'Please select product', trigger: 'change' },
  ],
  nickname: [
    { required: true, message: 'Please input user name', trigger: 'change' },
  ],
  avatar: [
    { required: true, message: 'Please select avatar', trigger: 'change' },
  ],
  comment: [
    { required: true, message: 'Please input comment', trigger: 'change' },
  ],
})

productListParams.value.limit = 0

handleGetProductList()

const commentFormCpt = ref(null)

const isSubmitting = ref(false)

function onSubmit() {
  commentForm.value.image.product_id = commentForm.value.product_id

  const form = commentFormCpt.value as any

  form.validate((valid: Boolean) => {
    if (valid) {
      isSubmitting.value = true
      submitComment(commentForm.value).then(() => {
        onCancel()
        emits('submit')
      }).finally(() => {
        isSubmitting.value = false
      })
    }
  })
}

const emits = defineEmits(['update:modelValue', 'submit'])

function onCancel() {
  const form = commentFormCpt.value as any

  form.resetFields()

  emits('update:modelValue', false)
}
</script>
